<!DOCTYPE html>
<html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>权限管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../../resources/lib/bui/css/dpl-min.css"
          th:href="@{/resources/lib/bui/css/dpl-min.css}"
          rel="stylesheet" />
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/bui-min.css}"
          rel="stylesheet" />
    <script src="../../../../resources/lib/bui/js/jquery-1.8.1.min.js"
            th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>
    <script src="../../../../resources/lib/bui/js/bui-min.js"
            th:src="@{/resources/lib/bui/js/bui-min.js}"></script>

</head>
<body>


<div style="padding: 10px;">
    <div class="row">
        <div class="span16">
            <div id="grid">
            </div>
        </div>
    </div>

    <div id="content" class="hide">
        <form id="ruleForm" class="form-horizontal">
            <div style="display: none">id:<input id="id" name="id" type="text"></div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>名称：</label>
                    <div class="controls">
                        <input id="name" name="name" type="text" class="input-normal control-text"
                               maxlength="20" data-rules="{required:true, nameRepeat:1}"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label"><s>*</s>描述：</label>
                    <div class="controls">
                        <textarea id="description" name="description" type="text" class="input-normal control-text" style="width:170px;height:42px"
                                  maxlength="50" data-rules="{required:true, descriptionRepeat:2}"></textarea>
                    </div>
                </div>
             </div>
        </form>
    </div>
    <!-- script start-->
    <script th:inline="javascript" type="text/javascript">
var store = null;
var grid = null;
var data = [];
var page = 15;//分页为15条
$(function(){
    BUI.use('bui/form',function (Form) {
        //名称校验
        Form.Rules.add({
            name : 'nameRepeat',
            msg : '该名称已存在',
            validator : function(value,baseValue,formatMsg){ //验证函数，验证值、基准值、格式化后的错误信息
                if(validFormInfo(value, baseValue)){
                    return formatMsg;
                }
            }
        }) ;
        //描述
        Form.Rules.add({
            name : 'descriptionRepeat',
            msg : '该描述已存在',
            validator : function(value,baseValue,formatMsg){ //验证函数，验证值、基准值、格式化后的错误信息
                if(validFormInfo(value, baseValue)){
                    return formatMsg;
                }
            }
        }) ;
    })
    BUI.use(['bui/grid','bui/data'],function(Grid,Data){
        var Grid = Grid
        var Store = Data.Store;
        var columns = [
            {title : 'id',dataIndex :'id',visible:false},
            {title : '名称',dataIndex :'name'},
            {title : '描述',dataIndex :'description'},
            {title : '操作',renderer : function(){
                return '<span class="grid-command btn-edit">编辑</span>'
            }}
        ]
        /*data = [
            {id:1,name:'权限1',description:'描述1'},
            {id:2,name:'权限2',description:'描述2'},
            {id:3,name:'权限3',description:'描述3'},
            {id:4,name:'权限4',description:'描述4'},
            {id:5,name:'权限5',description:'描述5'},
            {id:6,name:'权限6',description:'描述6'}];*/

        var editing = new Grid.Plugins.DialogEditing({
            contentId : 'content', //设置隐藏的Dialog内容
            triggerCls : 'btn-edit',
            editor : {
                  listeners : {
                    show:function(){
                        var form = this.get('form');
                    }
                },
                title : '权限信息'
            }
        })
        store = new Store({
            data : data,
            pageSize : page,
            autoLoad:true
        })
        grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            width : 800,
            forceFit : true,
            tbar:{ //添加、删除
                items : [{
                    btnCls : 'button button-small',
                    text : '<i class="icon-plus"></i>添加',
                    listeners : {
                        'click' : addFunction
                    }
                },
                    {
                        btnCls : 'button button-small',
                        text : '<i class="icon-remove"></i>删除',
                        listeners : {
                            'click' : delFunction
                        }
                    }]
            },
            bbar:{
                pagingBar : true
            },
            plugins : [editing,Grid.Plugins.CheckSelection],
            store : store
        });
        grid.render();

        //新增记录
        grid.on('itemrendered',function(e){
            var formData = BUI.JSON.stringify(e.item);
            if(e.item.id == ""){
                addData(BUI.JSON.stringify(e.item));
            }

        })
        //修改记录
        grid.on('itemupdated',function(e){
            modifyData(BUI.JSON.stringify(e.item));
        })


        //添加记录
        function addFunction(){
            var newData = {name : ''};
            editing.add(newData,'name'); //添add加记录后，直接编辑
        }
        //删除选中的记录
        function delFunction(){
            var selections = grid.getSelection();
            var selectionLength = selections.length;
            if(selectionLength == 0){
                return;
            }
            BUI.Message.Confirm('是否确定删除',function(){
                deleteData(BUI.JSON.stringify(selections));
                store.remove(selections);
            },'question');
        }
    });//BUI
    $("#name").blur(function(){
        this.value = $.trim(this.value);
        userForm.getField(this.name).valid();
    });
    $("#description").blur(function(){
        this.value = $.trim(this.value);
    });
    init();

});//初始化页面组件结束

/**
 * 添加数据
 */
function addData(params){
    var commitUrl = /*[[@{/admin/system/permission_manager/addData}]]*/'/';
    commitData(params, commitUrl)
}

/**
 * 删除数据
 */
function deleteData(params){
    var commitUrl = /*[[@{/admin/system/permission_manager/deleteData}]]*/'/';
    commitData(params, commitUrl)
}

/**
 * 修改数据
 */
function modifyData(params){
    var commitUrl = /*[[@{/admin/system/permission_manager/modifyData}]]*/'/';
    commitData(params, commitUrl)
}

/**
 * 向后台提交数据
 * @param parms
 * @param url
 */
function commitData(params, commitUrl){
    //bui提供的ajax提交数据
    BUI.use(['bui/data'],function(Data){
        var Ajax  = Data.Proxy.Ajax;
        var ajax = new Ajax({
            url : commitUrl
        })
        ajax.read({formData : params},
                function(data){
                    queryData();
                },
                this);
    });
}

/**
 *查询权限数据
 */
function queryData(){
    var url = /*[[@{/admin/system/permission_manager/queryData}]]*/'/';
    //bui提供的ajax提交数据
    BUI.use(['bui/data'],function(Data){
        var Ajax  = Data.Proxy.Ajax;
        var ajax = new Ajax({
            url : /*[[@{/admin/system/permission_manager/queryData}]]*/'/'
        })
        ajax.read(
                {},
                function(data){
                    store.setResult(data);
                },
                this);
    });
}

/**
 * 校验信息是否重复
 * @param name
 * @return boolean
 */
function validFormInfo(value, type){
    var  rs = true;
    var id = $("#id").val();
    var gridCount = grid.getCount();
    if(0==gridCount){
        rs = false;
    }
    var rowData;
    for(var i=0;i<gridCount;i++){
        var row = store.getResult()[i];
        if(id == row.id ){
            rs = false;
        }else{
            if(1 == type){
                //名称
                rowData = row.name;
            }
            if(2 == type){
                //描述
                rowData = row.description;
            }
            if(value == rowData){
                rs = true;
                break;
            }else{
                rs = false;
            }
        }
    }
    return rs;
}

/**
 * 初始化页面
 */
function init(){
    //加载页面数据
    queryData();
}
</script>
    <!-- script end -->
</div>
</body>
</html>